<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页面</title>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="/static/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.0.0/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>

<div class="layui-container">
    <!--水平导航栏-->
    <ul class="layui-nav" style="background:midnightblue;">
        <li class="layui-nav-item">
            <a href="{% url 'main' %}">全国气象展示</a>
        </li>

        <li class="layui-nav-item">
            <a href="{% url 'search' %}">气象数据搜索展示</a>
        </li>

        <li class="layui-nav-item  layui-this">
            <a href="{% url 'chinaMap' %}">全国天气展示</a>
        </li>

        <li class="layui-nav-item">
            <a href="javascript:;">统计图表</a>
            <!-- 二级菜单 -->
            <dl class="layui-nav-child">
                <dd>
                    <a href="{% url 'max_temp_state' %}">全国地区最高温度</a>
                </dd>
                <dd>
                    <a href="{% url 'min_temp_state' %}">全国地区最低温度</a>

                </dd>
            </dl>
        </li>
         <li class="layui-nav-item layui-layout-admin" style="left: 350px; ">

            <label color="white">
                <!-- 显示信息代码位置 -->
                {{ msg }}
            </label>
            </li>
            <li class="layui-nav-item layui-layout-admin" style="left: 420px; ">
                <a href="{% url 'logout' %}" class="layui-btn" style="background:orange;">登出</a>
            </li>
    </ul>
    <br>
    <!-- 可视化图例显示 -->
    <div id="chinaMap" style="width: 1200px;height:700px;"></div>
</div>
<script type="text/javascript">
    // 注意:导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
    });
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chinaMap'));
    var optionMap = {
        backgroundColor: '#FFFFFF',
        title: {
            text: '全国最高温地图大数据',
            subtext: '',
            x: 'center'
        },
        tooltip: {
            trigger: 'item'
        },

        //左侧小导航图标
        visualMap: {
            show : true,
            x: 'left',
            y: 'center',
            splitList: [
                {start: 40, end: 100},
                {start: 36, end: 39},
                {start: 34, end: 35},
                {start: 31, end: 33},
                {start: 26, end: 30},
                {start: 21, end: 25}
            ],
            color: ['#D2691E', '#FF8C00', '#FFA500', '#FFD700', '#FFFACD', '#F0FFF0']
            // color: ['#e6ac53', '#9feaa5', '#74e2ca', '#85daef', '#9fb5ea', '#5475f5']
        },

        //配置属性
        series: [{
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true  //省份名称
                },
                emphasis: {
                    show: true
                }
            },
            data:{{ data|safe }}  //数据
        }]
    };

    //使用制定的配置项和数据显示图表
    myChart.setOption(optionMap);
</script>
</body>
</html>